<template>
    <d2-container class="page" type="full">
        <d2-grid-layout :isDraggable=false
                v-bind="layout"
                @layout-updated="layoutUpdatedHandler">
            <d2-grid-item
                    v-for="(item, index) in layout.layout"
                    :key="index"
                    v-bind="item"
            >
                <template v-if="item.i === '信息统计'">

                    <el-row :gutter="20">
                        <el-col :span="8" v-for="(item,index) in infodata" :key="index">
                            <template v-if="item.i === '告警数据'">
                                <el-card class="grid-content  page_card"
                                         style="background: linear-gradient(270deg,rgba(241,166,120,1) 0%,rgba(232,51,112,1) 100%);">
                                    <div class="text item infoitemfont">{{item.i}}</div>
                                    <d2-count-up :end="item.num" class="text item infonumfont"></d2-count-up>
                                    <span class="infonumfont2"> 笔</span>
                                </el-card>
                            </template>
                            <template v-else-if="item.i === '未处理告警'">
                                <el-card class="grid-content  page_card"
                                         style="background: linear-gradient(90deg,rgba(85,113,248,1) 0%,rgba(199,122,249,1) 100%);">
                                    <div class="text item infoitemfont">{{item.i}}</div>
                                    <d2-count-up :end="item.num" class="text item infonumfont"></d2-count-up>
                                    <span class="infonumfont2"> 笔</span>
                                </el-card>
                            </template>
                            <template v-else-if="item.i === '设备统计'">
                                <el-card class="grid-content  page_card"
                                         style="background: linear-gradient(90deg,rgba(20,181,167,1) 0%,rgba(94,236,199,1) 100%);">
                                    <div class="text item infoitemfont">{{item.i}}</div>
                                    <d2-count-up :end="item.num" class="text item infonumfont"></d2-count-up>
                                    <span class="infonumfont2"> 台</span>
                                </el-card>
                            </template>
                        </el-col>
                    </el-row>

                </template>
                <template v-else>
                    <el-card shadow="hover" class="page_card" :body-style="{ padding: '0px' }" v-if="item.i === '地理分布'">
                        <div slot="header">
                            <span>{{item.i}}</span>
                        </div>

                        <!--<div class="inner"   style="width: 800px;height: 500px ">-->
                        <!--<ve-map :data="mapchartData" :settings="mapchartSettings" v-bind="pubSetting"></ve-map>-->
                        <!--</div>-->
                        <!--<baidu-map class="bm-view" :dragging=false center="杭州" ak="Ih6Gfsl6ixZoOCbIVFo2ZArAoC8qgn5X">-->
                        <!--</baidu-map>-->
                        <baidu-map class="bm-view" :dragging=true :scrollWheelZoom="true"  :center="center" v-bind="pubSetting"
                                    :zoom="zoom" @ready="loadMapData"
                                   :inertial-dragging="true" :scroll-wheel-zoom="false" :mapStyle="mapStyle">
                            <bm-marker v-for="item in pointsdata"  :key="item.id" :position="item.center"  :icon="{url: path1, size: {width: 30, height: 30}}" v-if="item.errorcount > 0" animation="BMAP_ANIMATION_BOUNCE" :dragging="false" @click="clickMark" @mouseover="mouseoverMark" @mouseout="mouseoutMark">

                            </bm-marker>

                            <bm-marker v-for="item in pointsdata"  :key="item.id" :position="item.center"  :icon="{url:  path2, size: {width: 30, height: 30}}" v-if="item.errorcount === 0"  :dragging="false" @click="clickMark" @mouseover="mouseoverMark" @mouseout="mouseoutMark">

                            </bm-marker>
                            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                            <bm-info-window :position="infoWindow.position"  :title="infoWindow.title" :show="infoWindow.show"    >
                                <p v-text="infoWindow.contents"  ></p>
                            </bm-info-window>
                        </baidu-map>
                    </el-card>
                    <el-card shadow="hover" class="page_card "
                             :body-style="{ padding: '0px',width:'100%',height:'370px' }"
                             v-else-if="item.i === '实时预警信息'">
                        <div slot="header">
                            <span>{{item.i}}</span>
                        </div>
                        <el-card class="box-card hoverred" v-for="(item,index) in warningData" :key="index"
                                 shadow="hover">
                            <div v-for="(item,index) in item" :key="index" class="text item" style="padding: 5px 0;">
                                {{index + ': ' + item }}
                            </div>
                        </el-card>

                    </el-card>
                    <el-card shadow="hover" class="page_card"
                             :body-style="{ padding: '0px',width:'25%',height:'370px'  }"
                             v-else-if="item.i === '本周隐患发生数'">
                        <div slot="header">
                            <span>{{item.i}}</span>
                        </div>
                        <ve-histogram :data="histogramchartData" :settings="histogramchartSettings"
                                      v-bind="pubSetting"></ve-histogram>
                    </el-card>
                    <el-card shadow="hover" class="page_card" v-else-if="item.i === '当月隐患处理率'"
                             :body-style="{ padding: '0px',width:'50%',height:'370px'  }">
                        <div slot="header">
                            <span>{{item.i}}</span>
                        </div>
                        <ve-histogram :data="chartData" :settings="chartSettings"  v-bind="pubSetting" ></ve-histogram>
                    </el-card>
                    <el-card shadow="hover" class="page_card" v-else>
                        <div slot="header">
                            <span>{{item.i}}</span>
                        </div>
                    </el-card>
                </template>
            </d2-grid-item>

        </d2-grid-layout>
        <template slot="footer">
            <div class="d2-text-center">版权所有 杭州开地</div>
        </template>
    </d2-container>
</template>

<script>

    import list from '@/pages/demo/charts/list/_mixin/list.js'



    import {getTree} from '@/api/sys/getTree'
    import {getProject} from '@/api/sys/getProject'
    import {getErrorChart} from '@/api/sys/getErrorChart'
    import {getErrorList} from '@/api/sys/getErrorList'
    import {menuAside} from "../../menu";
    import {mapState} from 'vuex'

    export default {
        created: function () {

        },

        components: {

        },

        mixins: [
            list
        ],
        data() {
            return {
                path1: require('../../../src/assets/images/map-marker-2-321.png'),
                path2: require('../../../src/assets/images/map-marker-2-32.png'),
                infoWindow: {
                    show: true,
                    title: '',
                    contents: '',
                    position: {}
                },
                mapStyle: {
                    styleJson: [
                        {
                            'featureType': 'land',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#e7f7fc'
                            }
                        },
                        {
                            'featureType': 'water',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#96b5d6'
                            }
                        },
                        {
                            'featureType': 'green',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#b0d3dd'
                            }
                        },
                        {
                            'featureType': 'highway',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#a6cfcf'
                            }
                        },
                        {
                            'featureType': 'highway',
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#7dabb3'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#e7f7fc'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#b0d5d4'
                            }
                        },
                        {
                            'featureType': 'local',
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#7a959a'
                            }
                        },
                        {
                            'featureType': 'local',
                            'elementType': 'labels.text.stroke',
                            'stylers': {
                                'color': '#d6e4e5'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#374a46'
                            }
                        },
                        {
                            'featureType': 'highway',
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#374a46'
                            }
                        },
                        {
                            'featureType': 'highway',
                            'elementType': 'labels.text.stroke',
                            'stylers': {
                                'color': '#e9eeed'
                            }
                        }
                    ]
                },
                center: {lng: 108, lat: 34},
                zoom: 6,
                pointsdata: [],
                menuAside: [],
                warningData: [],
                chartData: {
                    columns: ['日期', '已处理隐患', '未处理隐患', '处理率'],
                    rows: [
                    ]
                },
                chartSettings: {
                    stack: { '用户': ['已处理隐患', '未处理隐患'] },
                    showLine: ['处理率'],
                    axisSite: { right: ['处理率'] },
                    yAxisType: ['KMB', 'percent'],
                    yAxisName: ['数值', '比率']
                },


                histogramchartSettings: {
                    stack: {'用户': ['访问用户', '下单用户']}
                },
                histogramchartData: {
                    columns: ['日期', '访问用户', '下单用户', '下单率'],
                    rows: [
                        {'日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32},
                        {'日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26},
                        {'日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76},
                        {'日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49},
                        {'日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323},
                        {'日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78}
                    ]
                },


                infodata: [
                    {'i': '告警数据', 'num': 0},
                    {'i': '未处理告警', 'num': 0},
                    {'i': '设备统计', 'num': 0}
                ],
                layout: {
                    layout: [
                        {'x': 0, 'y': 0, 'w': 6, 'h': 3, 'i': '信息统计'},
                        {'x': 6, 'y': 0, 'w': 3, 'h': 10, 'i': '本周隐患发生数'},
                        {'x': 9, 'y': 0, 'w': 3, 'h': 10, 'i': '实时预警信息'},
                        {'x': 0, 'y': 3, 'w': 6, 'h': 17, 'i': '地理分布'},
                        {'x': 6, 'y': 15, 'w': 6, 'h': 10, 'i': '当月隐患处理率'},

                    ],
                    colNum: 12,
                    rowHeight: 30,
                    isDraggable: true,
                    isResizable: false,
                    isMirrored: false,
                    verticalCompact: true,
                    margin: [10, 10],
                    useCssTransforms: true
                }
            }
        },

        mounted() {
            this.dealErrorChart()
            this.loadMapData()
            this.loadTableData()
        },
        watch: {
            node: function (newnode, oldnode) {
                console.log('newnode', newnode)
                this.leafChoosed(newnode)
                this.infodata[0].num = newnode.errorcount1
                this.infodata[1].num = newnode.errorcount2
                this.infodata[2].num = newnode.devicecount
            }
        },
        computed: {
            ...mapState('d2admin/projectSelect', [
                'node'
            ])
        },
        methods: {
            loadTableData () {
                getErrorList().then((res) => {

                    res.data.forEach((item) => {
                        if (item.LogEndTime === null) {
                            item.LogEndTime = '无数据'
                        }
                        if (item.ProjectName === null) {
                            item.ProjectName = '无数据'
                        }
                        if (item.LogTime === null) {
                            item.LogTime = '无数据'
                        }
                        if (item.ErrorName === null) {
                            item.ErrorName = '无数据'
                        }
                        if (item.errorType === 0) {
                            item.errorType = '报警'
                        } else if (item.errorType === 1) {
                            item.errorType = '故障'
                        } else if (item.errorType === 2) {
                            item.errorType = '系统'
                        }
                    })

                    if (res.data.length > 0) {

                        var error = ['报警预警', '故障预警', '系统预警']
                        var errornamnArr = res.data[0].ErrorName.split('')
                        errornamnArr.forEach((item, index) => {
                            if (item === '相') {
                                errornamnArr[index] = '像'
                            }
                        })
                        var errorName = errornamnArr.join('')
                        var ttsConetent = '有新的' + error[0] + '  ' + errorName
                        res.data.forEach((item) => {
                            var k = {}
                            k.项目名称 = item.ProjectName
                            k.故障最早发生时间 = item.LogTime
                            k.描述 = item.ErrorName
                            k.故障最后发生时间 = item.LogEndTime
                            k.故障类型 = item.errorType
                            this.warningData.push(k)
                        })
                        // new Audio(
                        //     'http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + ttsConetent
                        // ).play()

                    } else {
                        this.warningData = [{
                            项目名称: '无数据',
                            故障最早发生时间: '无数据',
                            描述: '无数据',
                            故障最后发生时间: '无数据',
                            故障类型: '无数据'
                        }]
                    }
                })
            },
            dealErrorChart () {
                getErrorChart().then((res) => {

                    this.chartData.rows = []
                    res.data.forEach((item) => {
                        var charDataItem = {'日期': '0', '已处理隐患': 0, '未处理隐患': 0, '处理率': 0}
                        charDataItem.日期 = item.DAY + '日'
                        charDataItem.已处理隐患 = item.processed
                        charDataItem.未处理隐患 = item.unprocess
                        if (item.unprocess === 0) {
                            charDataItem.处理率 = 1
                        } else {
                            charDataItem.处理率 = (item.processed / item.total)
                        }
                        this.chartData.rows.push(charDataItem)
                    })
                })
            },
            leafChoosed(node) {
                this.center.lat = node.lat
                this.center.lng = node.lng
                this.zoom = 15
            },
            mouseoverMark({type, target, point, pixel}) {
                this.pointsdata.forEach((item) => {
                    if (target.point.lat === item.center.lat && target.point.lng === item.center.lng) {
                        this.infoWindow.title = item.projectName
                        this.infoWindow.contents = item.address
                    }
                })
                this.infoWindow.position = target.point
                this.infoWindow.show = true
            },
            mouseoutMark({type, target, point, pixel}) {
                this.infoWindow.show = false
            },
            clickMark({type, target}) {
                console.log(target)
                this.center.lng = target.LA.lng
                this.center.lat = target.LA.lat
                this.zoom = 15
            },

            loadMapData() {

                getProject(null, null, 1, 20000, '中国',true).then(res => {
                    console.log(res.data)
                    for (var item of res.data) {

                        var point = {lng: 0, lat: 0}
                        point.lng = item.lng
                        point.lat = item.lat
                        item.center = point
                    }
                    console.log(res.data)
                    this.pointsdata = res.data
                })
            },
            // 显示提示
            showInfo() {
                this.$notify({
                    title: '提示',
                    message: '你可以按住卡片拖拽改变位置；或者在每个卡片的右下角拖动，调整卡片大小'
                })
            }
            ,
            // 测试代码
            layoutUpdatedHandler(newLayout) {

            }
            ,
        }
    }
</script>

<style lang="scss" scoped>
    @import '~@/assets/style/public.scss';

    .el-card {
        border-radius: 0px;
    }

    /*无效的样式 后期在研究*/
    .d2-container-full__footer {
        padding: 8px;
    }

    .el-card__header {
        padding: 18px 20px;
        border-bottom: 1px solid #ebeef5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-left: 5px solid rgba(83, 97, 255, 1);
        background: rgba(246, 247, 255, 1);
    }

    .hoverred:hover {
        background: rgba(255, 235, 188, 1);;
    }

    .bm-view {
        width: 100%;
        height: 615px;
        padding: 0px;
        margin: 0px;

    }

    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;

    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .infoitemfont {

        height: 25px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 25px;
    }

    .infonumfont2 {

        height: 15px;
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 25px;
    }

    .infonumfont {
        width: 75px;
        height: 42px;
        font-size: 36px;
        font-family: DINAlternate-Bold;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        line-height: 42px;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .page {
        .vue-grid-layout {
            background-color: $color-bg;
            border-radius: 4px;
            margin: -10px;
            .page_card {
                height: 100%;
                @extend %unable-select;
            }
            .vue-resizable-handle {
                opacity: .3;
                &:hover {
                    opacity: 1;
                }
            }
        }
    }
</style>
